<template>
  <div>
    <a-card class="h-full" :body-style="{ width: '100%', padding: '12px', height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }">
      <BaseTitle title="今日待办" class="!mb-0">
        <a-button type="link" size="small" :icon="h(PlusOutlined)" @click="openTodo = true">新增</a-button>
      </BaseTitle>
      <a-list class="mt-2 pt-2 overflow-auto flex-1" size="small" :data-source="datas" :split="false">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="truncate">
              <a-tag :color="item.isEmergency ? 'orange' : 'blue'">{{ item.isEmergency ? '急' : '普' }}</a-tag>
              <a-tag :color="item.isEmergency ? 'red' : 'blue'">{{ dayjs(item.pdate).format('MM-DD') }} {{ item.ptime }}</a-tag>
              <span>{{ item.pendingContent }}</span>
            </div>
            <template #actions>
              <a-button type="link" @click="onConfirm(item)"> <CheckSquareOutlined :style="{ color: '#12a150' }" /> </a-button>
              <a-button type="text" danger @click="onDone(item)"> <DeleteOutlined /> </a-button>
            </template>
          </a-list-item>
        </template>
      </a-list>
      <a-modal v-model:open="openTodo" :width="680" centered title="新增待办" @ok="onOk" @cancel="onCancel">
        <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '80px' } }">
          <a-form-item label="紧急程度" class="w-full">
            <a-radio-group v-model:value="formState.isEmergency">
              <a-radio-button :value="0">普通</a-radio-button>
              <a-radio-button :value="1">紧急</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="待办日期" class="w-1/2">
            <a-date-picker v-model:value="formState.pdate" value-format="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item label="待办时间" class="w-1/2">
            <a-date-picker v-model:value="formState.ptime" picker="time" value-format="hh:mm:ss" />
          </a-form-item>
          <a-form-item label="待办事项" class="w-full">
            <a-textarea v-model:value="formState.pendingContent" rows="5" placeholder="请输入" />
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { h, ref, onMounted } from 'vue'
import { PlusOutlined, CheckSquareOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import BaseTitle from '@/components/BaseTitle'
import { post } from '@/utils/request'
import useUserStore from '@/store/user'

const { empId } = useUserStore()
const formState = ref({
  isEmergency: 0
})
const openTodo = ref(false)
//医生代办事项
const datas = ref()
const getData = async (pageNum = 1, pageSize = 999) => {
  const { code, data } = await post('/common/portal/getPortalMyPendingList', {
    empId: empId,
    pageNum,
    pageSize
  })
  if (code === 0) {
    datas.value = data
  }
}
const onDone = async (item) => {
  const { code, msg } = await post('/common/portal/removeMyPending', item)
  if (code === 0) {
    message.success(msg)
    getData()
  }
}

const onConfirm = async (item) => {
  const { code, msg } = await post('/common/portal/confirmMyPending', {
    id: item.id
  })
  if (code === 0) {
    message.success(msg)
    getData()
  }
}

const onOk = async () => {
  const res = await post('/common/portal/doSaveMyPending', {
    createUser: empId,
    confirmed: 0,
    ...formState.value
  })
  res.code !== 0 ? message.error(res.msg || '操作失败') : message.success('保存成功')
  openTodo.value = false
  formState.value = { isEmergency: 0 }
  getData()
}
const onCancel = () => {
  formState.value = { isEmergency: 0 }
  openTodo.value = false
}

onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
:deep(.ant-list) {
  .ant-list-item {
    &:hover {
      background-color: #f5f5f5;
    }
  }
}
</style>
